<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery动画</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color:pink;
            border: 1px solid black;
            position: absolute;
            top:0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="hidden" style="margin-top: 100px;">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">显示/隐藏</button>
    <br>
    <button id="up">滑上</button>
    <button id="down">滑下</button>
    <button id="slideToggle">滑上滑下</button>
    <br>
    <button id="fadein">淡入</button>
    <button id="fadeout">淡出</button>
    <button id="fadetoggle">淡入/淡出</button>
    <button id="fadeto">fadeTo</button>

    <br>
    <button id="animate">animate</button>
    <button id="stop">stop</button>
</body>
<script src="./lib/jquery-3.4.1.js"></script>
<!-- 引入第三方库，有顺序要求 -->
<script src="./lib/jquery.color.min.js"></script>
<script>
    $(document).ready(function(){
        $("#hidden").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").hide(1*1000,function(){
                alert("动画执行完成")
            });
        });


        $("#show").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").show(2*1000,function(){
                console.log("盒子显示了");
            });
        });
        $("#toggle").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").toggle(2*1000,function(){
                console.log("盒子显示/隐藏了");
            });
        });


        $("#up").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").slideUp(3*1000,function(){
                console.log("滑上结束");
            });
        });


        $("#down").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").slideDown(3*1000,function(){
                console.log("滑下结束");
            });
        });

        $("#slideToggle").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").slideToggle(2*1000,function(){
                console.log("滑下滑上")
            });
        });

        $("#fadein").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").fadeIn(2*1000,function(){
                console.log("淡入")
            });
        });
        $("#fadeout").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").fadeOut(2*1000,function(){
                console.log("淡入")
            });
        });
        $("#fadetoggle").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").fadeToggle(2*1000,function(){
                console.log("淡入/淡出")
            });
        });
        $("#fadeto").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").fadeTo(2*1000,0.5,function(){
                console.log("淡入/淡出")
            });
        });
        $("#animate").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").animate({
               width:'200px',
               height:'200px',
               left:'500px'
            
            },2*1000,function(){
                console.log("ddddd");
            });
        });
        $("#animate").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").animate({
               width:'200px',
               height:'200px',
               top:'500px'
            
            },2*1000,function(){
                console.log("ddddd");
            });
        });
        $("#animate").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").animate({
               width:'200px',
               height:'200px',
               left:'0px'
            
            },2*1000,function(){
                console.log("ddddd");
            });
        });
        $("#animate").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").animate({
               width:'50px',
               height:'50px',
               top:'0px',
               "backgroundColor":"blue",
            
            },2*1000,function(){
                console.log("ddddd");
            });
        });
        $("#stop").on('click',function(){
            // 参数1：时长
            // 参数2：回调函数
            $(".box").stop(true,false);
        });


        // 对象
        var xm = {
            name:'小明',
            age:18,
            gender:'男',
            study:function(){
                console.log("学习。。。")
            }
        }

        var xh = new Object();
        xh.name="小红";

        // json / xml 数据交换格式

        // 前端 向后台 发送数据
        var username="张三";
        var password="123456";

        // json对象
        var register = {
            username:username,
            password:password,
            cont:{
                tel:'1359999999',
                QQ:'1111',
                Wechat:'2222'
            }
        }

        console.log(register);
        console.log(typeof register);

        var reg = JSON.stringify(register);
        console.log(reg)
        console.log(typeof reg);

        var regg = JSON.parse(reg);
        console.log(regg.username,regg.password)
        console.log(typeof regg)

       


    })


</script>
</html>